<template>
  <view class="container">
    <view class="header">
      <text class="device-label">设备名称：</text>
      <text class="device-name">{{ deviceName }}</text>
      <u-tag text="在线" type="success" size="mini" class="status" />
    </view>

    <view class="list">
      <view class="item" v-for="(u, i) in watchers" :key="i">
        <u-avatar :src="u.avatar" size="40" mode="circle" />
        <view class="content">
          <view class="phone-pill" @longpress="copyPhone(u.phone)">{{ u.phone }}</view>
          <u-tag :text="roleLabel(u.role)" :type="roleType(u.role)" size="mini" class="role" @click="openRole(i)" />
        </view>
      </view>
    </view>

    <u-action-sheet :show="roleSheet.show" :actions="roleSheet.actions" @close="roleSheet.show = false" @select="onRoleSelect" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      deviceName: 'K1490078243343',
      watchers: [
        { avatar: '', phone: '13100000000', role: 'admin' },
        { avatar: '', phone: '13100000001', role: 'guest' },
      ],
      roleSheet: { show: false, index: -1, actions: [ { name: '监控管理员', value: 'admin' }, { name: '无权监控者', value: 'guest' }, { name: '移除监控者', value: 'remove' } ] },
    };
  },
  onLoad(query) {
    if (query && query.deviceName) this.deviceName = query.deviceName;
  },
  methods: {
    roleLabel(r) { return r === 'admin' ? '监控管理员' : '无权监控者'; },
    roleType(r) { return r === 'admin' ? 'success' : 'warning'; },
    openRole(index) { this.roleSheet.index = index; this.roleSheet.show = true; },
    onRoleSelect(e) {
      const idx = this.roleSheet.index;
      if (idx < 0) return;
      if (e.value === 'remove') { this.watchers.splice(idx, 1); }
      else { this.watchers[idx].role = e.value; }
      this.roleSheet.show = false; this.roleSheet.index = -1;
    },
    copyPhone(p) { uni.setClipboardData({ data: p }); },
  },
};
</script>

<style lang="scss" scoped>
page { height: 100%; }
.container { height: 100%; background: #f6f7fb; padding: 16rpx 30rpx 30rpx; }
.header { display: flex; align-items: center; gap: 8rpx; padding: 8rpx 4rpx 12rpx; }
.device-label { font-size: 24rpx; color: #5f6169; }
.device-name { font-size: 24rpx; color: #1e1f23; }
.status { margin-left: 8rpx; }
.list { display: grid; gap: 16rpx; margin-top: 8rpx; }
.item { display: flex; align-items: center; gap: 12rpx; background: transparent; }
.content { display: flex; align-items: center; gap: 12rpx; }
.phone-pill { background: #5f91ff; color: #ffffff; padding: 10rpx 18rpx; border-radius: 10rpx; font-size: 26rpx; }
.role { background: transparent; }
</style>